<template>
  <a-modal
    v-model:open="show"
    width="40%"
    centered
    :title="title"
    :footer="null"
    @cancel="handleCloseDialog"
  >
    <a-radio-group
      v-model:value="formState.menuType"
      button-style="solid"
      @change="handleChooseRadio"
    >
      <a-radio-button value="M">目录</a-radio-button>
      <a-radio-button value="C">菜单</a-radio-button>
    </a-radio-group>
    <!-- <icon-picker /> -->
    <a-form
      ref="formRef"
      class="form"
      :model="formState"
      :rules="rules"
      :label-col="labelCol"
      :wrapper-col="wrapperCol"
    >
      <a-form-item
        v-if="formState.menuType == 'C'"
        ref="parentId"
        label="上级菜单"
        name="parentId"
      >
        <a-tree-select
          v-model:value="formState.parentId"
          style="width: 100%"
          :tree-data="treeData"
          allow-clear
          :fieldNames="{children:'children',label:'menuName',value:'menuId'}"
          placeholder="请选择上级菜单"
          tree-node-filter-prop="label"
        />
      </a-form-item>
      <a-form-item ref="menuName" label="菜单名称" name="menuName">
        <a-input
          :bordered="false"
          class="h-form-input"
          v-model:value="formState.menuName"
        />
      </a-form-item>
      <a-form-item ref="path" label="路由地址" name="path">
        <a-input
          :bordered="false"
          class="h-form-input"
          v-model:value="formState.path"
        />
      </a-form-item>
      <a-form-item
        v-if="formState.menuType == 'C'"
        ref="component"
        label="组件路径"
        name="component"
      >
        <a-input
          :bordered="false"
          class="h-form-input"
          v-model:value="formState.component"
        />
      </a-form-item>
      <a-form-item ref="name" label="图标" name="icon">
        <a-input-group compact>
          <a-input
            class="h-form-input"
            v-model:value="formState.icon"
            style="width: calc(100% - 50px)"
          />
          <IconPicker @onChooseIcon="chooseIcon" />
        </a-input-group>
      </a-form-item>
      <a-form-item ref="name" label="排序" name="orderNum">
        <a-input
          :bordered="false"
          class="h-form-input"
          type="number"
          v-model:value="formState.orderNum"
        />
      </a-form-item>
      <a-form-item ref="name" label="是否显示" name="visible">
        <a-switch
          v-model:checked="formState.visible"
          checked-children="显示"
          un-checked-children="隐藏"
        />
      </a-form-item>
      <a-form-item :wrapper-col="{ offset: 9, span: 4 }">
        <div class="btns center">
          <a-space>
            <a-button @click="handleCloseDialog">取消</a-button>
            <a-button type="primary" @click="handleSubmit">确定保存</a-button>
          </a-space>
        </div>
      </a-form-item>
    </a-form>
  </a-modal>
</template>
<script setup>
import { reactive, ref, onMounted, toRef } from "vue";
import { addMenu, getMenu, updateMenu } from "@/api/system";
import IconPicker from "./iconPicker.vue";
const props = defineProps(["show", "title", 'treeData', 'modelId']);
const {show, title, treeData, modelId} = props
const formRef = ref();
const labelCol = {
  span: 4,
};

const wrapperCol = {
  span: 18,
};
let formState = reactive({
  menuType: "M",
  menuName: "",
  component: "",
  visible: true,
  path: "",
  icon: "",
  orderNum: 0,
  code: undefined,
});
const getMenuList =() => {
  getMenu({id:modelId}).then(res => {
    if(res.code == 200) {
      formState = Object.assign(formState, res.data)
    }
  })
}
const rules = {
  parentId: [
    {
      required: true,
      message: "请选择上级菜单",
      trigger: "change",
    },
  ],
  menuName: [
    {
      required: true,
      message: "请输入菜单名字",
      trigger: "blur",
    },
  ],
  path: [
    {
      required: true,
      message: "请输入路由地址",
      trigger: "blur",
    },
  ],
  component: [
    {
      required: true,
      message: "请输入组件地址",
      trigger: "blur",
    },
  ],
  person: [
    {
      required: true,
      message: "请输入手机号",
      trigger: "blur",
    },
  ],
};
const emits = defineEmits(["handleSave", "handleCancel"]);
const handleSubmit = () => {
  const params = Object.assign({},formState)
  params.visible = params.visible ? 1: 0
  if(params.menuType == "M") {
    params.component = 'BlankLayout'
  }
  if(params.menuId){
    updateMenu(params).then(res => {
      emits("handleSave", true);
    })
  } else {
    addMenu(params).then((res) => {
      emits("handleSave", true);
    });
  }
};
const handleCloseDialog = () => {
  emits("handleCancel", false);
};
function chooseIcon(val) {
  formState.icon = val
}

function handleChooseRadio(val) {
  formState.menuType = val.target.value;
}
onMounted(() => {
  if(modelId){
    getMenuList()
  }
});
</script>
<style scoped lang="less">
.form {
  margin-top: 24px;
}
.content {
  background: #f4f6f8;
  border-radius: 8px;
  margin-top: 20px;
  min-height: 200px;
  margin-bottom: 40px;
}
.h-form-input {
  background-color: #f3f5f7;
}
</style>
